<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <!-- 引入Bootstrap 5稳定版的CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- 引入Bootstrap 5稳定版的JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

  <div id="app2">
    <!-- <div id="app">
    <h1>{{ message }}</h1>

    <div v-show="showBox" class="border border-primary">v-show盒子</div>
    <div v-if="showBox">v-if盒子</div>

    <div>
      <p v-if="score >= 90">大于90显示</p>
      <p v-else-if="score >= 80">大于80显示</p>
      <p v-else-if="score >= 70">大于70显示</p>
      <p v-else-if="score >= 60">大于60显示</p>
      <p v-else>小于60显示</p>
    </div>



    <div class="card  ">
      <div class="border border-primary mt-3">
        <button v-on:click="addClick(1)">点我加1</button>
        <p>当前计数：{{ count }}</p>
        <button @click="reduceClick(2)">点我减1</button>
      </div>
    </div>

  </div> -->


    <h1>{{ message }}</h1>

    <img v-bind:src="imgUrl" alt="">

    <a v-bind:href="imgUrl">点击这里</a>
    <ul>
      <li v-for="(item, index) in list">{{ item }}--{{index}}</li>
    </ul>

    <ul>
      <li v-for="(item,index) in bookList " :key=index>
        <span>{{item.id}}--{{item.name}}--{{item.author}}</span>
        <button @click="deleteBook(item.id)">删除</button>
      </li>
    </ul>

    <div>
      <span>账号：<input type="text" v-model="userName"></span><br>
      <span>密码：<input type="password" v-model="passWord"></span><br>
      <button @click="login">登录</button>
      <button @click="reset">重置</button>

    </div>


  </div>

</body>

<script>
  // var app = new Vue({
  //   el: '#app',
  //   data: {
  //     message: 'Hello Vue.js!',
  //     showBox: true,
  //     score: 85,
  //     count: 100
  //   },
  //   methods: {
  //     addClick: function (number) {
  //       console.log('按钮被点击了');
  //       this.count += number;
  //     },

  //     reduceClick: function (number) {
  //       console.log('按钮被点击了');
  //       this.count -= number;
  //     }
  //   }
  // });


  var app2 = new Vue({
    el: '#app2',
    data: {
      userName: '张三',
      passWord: '123456',
      list: ['西瓜', '苹果', '香蕉', '橘子', '草莓'],
      message: 'Hello Vue222222222222222.js!',
      showBox: true,
      imgUrl: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
      bookList: [{ id: 1, name: 'Vue', author: "尤雨溪" }, { id: 2, name: 'React', author: "马克" }, { id: 3, name: 'Angular', author: "格雷戈里" }]
    },
    methods: {
      deleteBook (id) {
        console.log('删除图书', id)
        this.bookList = this.bookList.filter(item => item.id !== id);

      }
      ,
      login () {
        console.log('登录成功:', this.userName, this.passWord);

      }
      ,
      reset () {


        this.userName = '';
        this.passWord = '';
        console.log('重置成功:', this.userName, this.passWord);
      }
    }
  }); 
</script>

</html>